function generateUUID() {

  // 生成32位uuid码

  let d = new Date().getTime();
  if (window.performance && typeof window.performance.now === "function") {
    d += performance.now(); //use high-precision timer if available
  }
  let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    let r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  return uuid;
}


$(function () {

  let uuid = '';

  //获取标签
  let $img = $('.captcha-graph-img img');
  let $user = $('input[name=username]');
  let $psd = $('input[name=password]');
  let $psd_re = $('input[name=password_repeat]');
  let $tel = $('input[name=telephone]');
  let $img_cap = $('input[name=captcha_graph]');
  let $sms_cap = $('input[name=sms_captcha]');
  let $sms_get = $('.sms-captcha');
  let $reg_submit = $('.form-contain');
  //页面一加载就生成验证码图片,并对当前页面uuid赋值
  generateVerificationImgUrl();
  //点击刷新验证码时候生成生成新的验证码
  $img.click(generateVerificationImgUrl);
  // blur为光标移出事件 光标移出时进行username判断 验证通过进行ajax提交到后台
  $user.blur(check_user);
  //绑定光标移出时对密码合法性的判断
  $psd.blur(check_password);
  //绑定光标移出时对重复密码一致性的判断
  $psd_re.blur(check_password_repeat);
  //绑定光标移出时对手机号合法性的校验
  $tel.blur(check_tel);
  //绑定获取手机验证码按钮点击事件，简单的pass非四位验证码，和手机号非空和合法性校验
  $sms_get.click(check_sms_code);
  //绑定form表单的提交事件
  $reg_submit.submit(check_submit);

  //生成验证码图片的url
  function generateVerificationImgUrl() {
    uuid = generateUUID();
    let VerificationImgUrl = '/image_code/' + uuid + '/';
    $img.attr('src', VerificationImgUrl)
  }

  //判断user输入框的合法性
  function check_user() {
    let username = $user.val();
    let returnValue = "";
    if (username === '') {
      message.showError('用户名为空，请输入正确的用户名');
      return
    }

    //   /.../为js的正则匹配  ^匹配开头 $匹配结尾
    //  判断输入的用户名是否符合规则
    if (!(/^\w{4,20}$/).test(username)) {
      message.showError('请输入4-20字符的用户名');
      return
    }
    // 经过前端验证后通过ajax提交到后端
    $.ajax({
      url: `/users/${username}/`,
      method: 'GET',
      dataType: 'json',
      async: false
    })
    //后端返回json数据后，前端根据后端返回的json数据进行相应交互响应，（.done和ajax的success具有相同作用）
        .done(function (res) {
          if (res.data.count === 1) {
            message.showError('用户已存在');
            returnValue = ""
          } else {
            message.showSuccess('用户名可用');
            returnValue = "success"
          }
        })

        .fail(function () {
          message.showError('服务器未知错误');
          returnValue = ""
        });
    return returnValue

  }

  //验证密码合法性
  function check_password() {
    let password = $psd.val();
    let password_repeat = $psd_re.val();
    if (password === '') {
      message.showError('密码为空，请填写密码');
      return
    }
    //密码必须为6-20位数字字母组合
    if (!(/^\w{6,20}$/).test(password)) {
      message.showError('密码必须为6-20长度的数字或字母组合');
      return
    }
    //用于密码框和密码重复确认来回切换时验证密码一致性
    if (password_repeat && !(password === password_repeat)) {
      message.showError('两次密码不一致');
      return
    }
    return password
  }

  //验证两次密码是否一至
  function check_password_repeat() {
    let password = $psd.val();
    let password_repeat = $psd_re.val();
    if (!(password === password_repeat) && password) {
      message.showError('两次密码不一致');
      return
    }
    return password_repeat
  }


  //验证手机号的合法性，当手机号为空时不校验，在获取验证码click时在校验手机号是否为空
  function check_tel() {
    // console.log(1, uuid);
    let tel = $tel.val();
    if (!(tel === '') && !((/^1[3-9]\d{9}$/).test(tel))) {
      message.showError('请输入有效的手机号');
      return
    }
    if (tel === '') {
      return
    }
    return 'success'
  }

  //点击获取验证码时进行前端图片验证码过滤，以及手机号是否合法
  function check_sms_code() {
    let tel = $tel.val();
    let img_code = $img_cap.val();

    //在判断一次手机号合法性
    if (check_tel() !== 'success') {
      message.showError('请输入有效的手机号');
      return
    }

    //简单过滤掉非四位数字字母的验证码，
    if (!(/^\w{4}$/).test(img_code)) {
      message.showError('图形验证码不正确');
      return
    }

    $.ajax({
      url: '/sms/',
      method: 'POST',
      dataType: 'json',
      async: false,
      data: {
        'uuid': uuid,
        'tel': tel,
        'img_code': img_code
      }
    })
        .done(function (res) {
          if (res.no === "0") {
            message.showSuccess('短信验证码发送成功');
            ~function () {
              //短信验证码发送成功后 获取验证码标签改变内容,色湖之60s的倒计时
              let t = 60;
              let timer = setInterval(function () {
                if (t === 1) {
                  clearInterval(timer);
                  $sms_get.html('获取短信验证码');
                  $sms_get.removeAttr('style');
                  $sms_get.removeAttr('disabled');
                  $sms_get.bind('click', check_sms_code);
                } else {
                  $sms_get.html(`${t}s`);
                  t -= 1;
                  //按钮变灰
                  $sms_get.attr('style', 'opacity: 0.2');
                  //按钮不可再点击
                  $sms_get.attr('disabled', true);
                  //按钮除去点击事件，避免在此期间发送ajax请求
                  $sms_get.unbind('click', check_sms_code)

                }
              }, 1000);
            }();

            return "success"
          }
          else {
            message.showError(res.msg);
            return "fail"
          }
        })
        .fail(function (err) {
          message.showError(err.error())
        });
  }

  //提交表单时校验数据的合法性
  function check_submit(ev) {
    ev.preventDefault();
    let username = $user.val();
    let tel = $tel.val();
    let sms_code = $sms_cap.val();
    let password = check_password();
    let password_repeat = check_password_repeat();
    if (!username || !(/^\w{4,20}$/.test(username))) {
      message.showError("用户名有误，请输入4-20字符的用户名");
      return
    }
    if (!(/^\w{6,20}$/).test(password) || !(/^\w{6,20}$/).test(password_repeat)) {
      message.showError("密码必须是6-20位的数字字母组合");
      return
    }
    if (password && password_repeat && (password !== password_repeat)) {
      message.showError("两次密码不一致");
      return
    }
    if (!tel || !(/^1[3-9]\d{9}$/).test(tel)) {
      message.showError("请检查手机号是否正确");
      return
    }
    if (!sms_code || !(/^\d{6}$/).test(sms_code)) {
      message.showError("手机验证码不正确，请核对");
      return
    }

    let data = {
      "username": username,
      "tel": tel,
      "password": password,
      "password_repeat": password_repeat,
      "sms_code": sms_code
    };
    $.ajax({
      url: "/user/register/",
      method: "POST",
      data: JSON.stringify(data),
      contentType: "application/json;charset=utf-8",
      //请求内容的数据格式
      type: "json",
      //响应数据的格式
      async: false
    })
        .done(function (res) {
          if (res.no === "0") {
            message.showSuccess(res.msg);
            setTimeout(function () {
              window.location.href = '/user/login'
            }, 1500)
          } else {
            message.showError(res.msg)
          }
        })
        .fail(function () {

          message.showError("服务器异常")
        })
  }

  csrf();
})
;